<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/list.css"/>
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css">
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>
		<!-- Latest compiled and minified Locales -->
		<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>

	</head>
	<body>

	<table id="user_list"></table>
	<script>
		// 这个方法主要就是进行向服务器传递参数
		$(function () {
			$("#user_list").bootstrapTable({
				// 本来是前端程序员的工作，进行相应的配置
				// 例如怎么分页，有哪些行哪些页显示
				url:"/user/list.do", //数据地址
				striped:true, //是否显示行的间隔
				pageNumber:1, //初始化加载第几页
				pagination:true,//是否分页
				sidePagination:'server',//服务器分页还是客户端分页
				pageSize:5,//每一页展示的数量
				pageList:[5,10,20],//可选的单页记录数
				showRefresh:true,//可以刷新，以防卡住
				queryParams:function (params) {// 向服务器发送的数据
					var temp = {
						offset:params.offset,
						pageNumber:params.limit
					};
					return temp;
				},
				columns:[//服务器返回的数据，是一个个的对象，每一个对象对应一个列
					{
						title:"编号",
						field:"id",//把id的数据取出来，以编号进行显示
						sortable:false
					},{
						title:"姓名",
						field:"name",//把id的数据取出来，以编号进行显示
						sortable:false
					},{
						title:"电话号码",
						field:"phone",//把id的数据取出来，以编号进行显示
						sortable:false
					},{
						title:"密码",
						field:"password",//把id的数据取出来，以编号进行显示
						sortable:false
					},{
						title:"注册时间",
						field:"regTime",//把id的数据取出来，以编号进行显示
						sortable:false
					},{
						title:"上次登录时间",
						field:"loginTime",//把id的数据取出来，以编号进行显示
						sortable:false
					}
				],

			});
		});

	</script>

		<!--<table class="tab tab-hover">
			<tr class="active">
				<th>编号</th><th>昵称</th><th>手机号码</th><th>密码</th><th>注册时间</th><th>上次登陆时间</th><th>操作</th>
			</tr>
			<tr>
				<td>1001</td>
				<td>帅哥一枚</td>
				<td>13843838438</td>
				<td>******</td>
				<td>2088-1-1</td>
				<td>2088-1-1</td>
				<td><span class="btn-danger">删除</span></td>
			</tr>
			<tr>
				<td>1001</td>
				<td>帅哥一枚</td>
				<td>13843838438</td>
				<td>******</td>
				<td>2088-1-1</td>
				<td>2088-1-1</td>
				<td><span class="btn-danger">删除</span></td>
			</tr>
			<tr>
				<td>1001</td>
				<td>帅哥一枚</td>
				<td>13843838438</td>
				<td>******</td>
				<td>2088-1-1</td>
				<td>2088-1-1</td>
				<td><span class="btn-danger">删除</span></td>
			</tr>
			<tr>
				<td>1001</td>
				<td>帅哥一枚</td>
				<td>13843838438</td>
				<td>******</td>
				<td>2088-1-1</td>
				<td>2088-1-1</td>
				<td><span class="btn-danger">删除</span></td>
			</tr>
		</table>-->
	</body>
</html>
